<script>
import _ from 'lodash'
import InspectTypeService from '@/request/reservation/inspect-type'
export default {
  name: 'AdminReservationInspectType',
  data () {
    return {
      listLoading: false,
      list: [],
      visibleEditType: false,
      editType: {}
    }
  },
  created: function () {
    this.listType()
  },
  watch: {},
  methods: {
    listType () {
      this.listLoading = true
      InspectTypeService.list().then(res => {
        this.list = _.clone(res.result || [])
      }).catch(error => {
        this.$message.error(error || '获取类别失败')
      }).finally(() => {
        this.listLoading = false
      })
    },
    handleDeleteType (item) {
      let confirm = this.$confirm('确认删除类别[' + item.name + ']吗?', '提示', {type: 'warning'})
      confirm.then(() => {
        InspectTypeService.delete({id: item.id}).then(() => {
          this.$message({
            type: 'success',
            message: '删除类别成功'
          })
          this.listType()
        }).catch(error => {
          this.$message.error(error || '删除类别失败')
        })
      })
      confirm.catch(() => {
        this.$message({
          type: 'info',
          message: '取消删除'
        })
      })
    },
    handleCancelEditType () {
      this.editType = {}
    },
    handleEditType (item) {
      this.editType = item ? _.cloneDeep(item) : {}
      this.visibleEditType = true
    },
    handleSaveTypeSuccess (type) {
      this.listType()
      this.visibleEditType = false
    },
    handleSaveTypeError (error) {
      this.$message.error(error || '保存类别失败')
    }
  }
}
</script>

<template>
  <el-container>
    <el-header height="45px">
      <el-form :inline="true" class="demo-form-inline" size="small">
        <el-form-item>
          <el-button type="primary" @click="handleEditType()">添加</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <el-table
        :data="list"
        stripe
        border
        style="width: 100%">
        <el-table-column prop="sn" label="编码"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEditType(scope.row)">编辑</el-button>
            <el-button size="small" type="text" style="color: #FF4949;" @click="handleDeleteType(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <!-- 编辑角色 -->
    <el-dialog title="编辑设备" :visible.sync="visibleEditType" @close="handleCancelEditType">
      <reservation-inspect-type-edit :data="editType" @success="handleSaveTypeSuccess" @error="handleSaveTypeError" @cancle="visibleEditType = false"></reservation-inspect-type-edit>
    </el-dialog>
  </el-container>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
